Blinking IE 6.0
I noticed this a while back, when attaching a background image style to an anchor tag with a hover event it causes IE 6.0 to flicker when the hover action is triggered.
The reason the flicker occurs is because the browser (IE 6.0) requests the image from the server each and every time you rollover the image. Not only is the flicker annoying it also creates an unnecessary load on the server.
One solution detailed by Dean Edwards is to add the following to your htaccess file in apache.
ExpiresActive On
ExpiresDefault A18000
ExpiresByType
image/gif A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType
image/png A2592000
This forces the server to tell the browser to cache the images, for a certain time period, however it does require apache and the 'expires_module' to be loaded.
Another solution as mentioned at fivesevensix.com is to buffer the image by placing it in the containing element and the anchor.
/* double buffer the image by placing it on BOTH the
containing element and the anchor */
#nav dt.share {
width: 164px;
background-image:
url(/images/home_share.gif);
}
#nav dt.share a {
background-image:
url(/images/home_share.gif);
}
/* using the pixy double image
method, so move the image around on :hover */
/* Note: this is one of the
causes of flicker, but we don't see it because it's double-buffered */
#nav
dt dt.share a:hover {
background-position: 0 23px;
}
Further references:-
- http://dean.edwards.name/my/flicker.html
- http://www.fivesevensix.com/studies/ie6flicker/
- http://wellstyled.com/css-nopreload-rollovers.html
